<template>
  <div>
       <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" ref="formInline"
            class="formInline" label-width="100px" slot="form">
                 <el-row :gutter="41">
                   <el-col :span="8">
                        <el-form-item label="班级" label-width="50px">
                            <el-select v-model="formInline.sClassId" placeholder="请选择" style="width:100%">
                                <el-option v-for="(item,index) in formInline.classArr" :key="index" 
                                :label="item.sNickName" :value="item.pId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                     <el-col :span="9">
                        <el-form-item label="摄像机设备序列号" label-width="150px">
                            <el-input v-model="formInline.sVideoNumber" placeholder="请输入摄像机设备序列号"></el-input>
                        </el-form-item>
                    </el-col>
                    <div class="btnPosition">
                        <el-button type="primary" @click="submit">查询</el-button>
                    </div>
                 </el-row>
            </el-form>
             <div slot="table-title" class="table-title"></div>
            <el-table :data="AnnounceList" style="width: 100%" v-loading="loading" border>
                <el-table-column align="center" label="学校名称" min-width="120">
                    <template scope="scope">
                       <span>{{scope.row.schoolName?scope.row.schoolName:'--'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="区域名称" align="center"  min-width="120">
                     <template scope="scope">
                       <span>{{scope.row.sAreaName?scope.row.sAreaName:'--'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="视角名称" align="center" min-width="100">
                      <template scope="scope">
                       <span>{{scope.row.sAngleView?scope.row.sAngleView:'--'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="摄像机设备序列号" align="center"  min-width="150">
                      <template scope="scope">
                       <span>{{scope.row.sVideoNumber?scope.row.sVideoNumber:'--'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="摄像机设备验证码" align="center"  min-width="150">
                    <template scope="scope">
                       <span>{{scope.row.sVideoCode?scope.row.sVideoCode:'--'}}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="NVR设备序列号" align="center"  min-width="140">
                    <template scope="scope">
                       <span>{{scope.row.sNvrNumber?scope.row.sNvrNumber:'--'}}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="NVR设备验证码" align="center"  min-width="140">
                      <template scope="scope">
                       <span>{{scope.row.sNvrCode?scope.row.sNvrCode:'--'}}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="通道号" align="center" min-width="80">
                      <template scope="scope">
                       <span>{{scope.row.sChannelNumber?scope.row.sChannelNumber:'--'}}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="生产厂家" align="center" min-width="100">
                      <template scope="scope">
                       <span>{{scope.row.sManuFactory=='1'?'海康':'大华'}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="操作" min-width="80">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="updateEye(scope.row)">修改视角</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total" :current-page.sync="listQuery.page" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
        <updateEye :updataData.sync="updataData" @searchList="searchFetchData"> </updateEye>
  </div>
</template>
<script>
import TableLayout from 'components/TableLayout';
import { mapState, mapActions, mapGetters } from 'vuex';
import { queryClassBySchool, pageLiveDevice} from 'api/deviceManagement';
import updateEye from './updateEye';
export default {
    name: 'deviceEyeList',
    components: { TableLayout, updateEye},
    data() {
        return {
            formInline: {
                schoolName: '',
                sAngleView: '', // 视角名称
                sClassId: '',
                schoolId: '',
                sVideoNumber: '',
                cameraNumber: '',
                schoolNameList: [],
                classArr: [
                ]
            },
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            loading: false,
            schoolLoading: false,
            AnnounceList: [],
            // rules: {
            //     schoolName: [{ required: true, message: '请输入学校名称' }]
            // },
             // 点击修改 传给子组件
            updataData: {
                eyeName: '',
                pId: '',
                sAngleView: '',
                dialogUpdata: false
            },
            getSchoolInfor: null
        }
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchData();
        }
    },

    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表

        }),
        ...mapGetters([
            'uid',
            'schoolName',
            'schoolId'
        ])
    },
    created() {
        this.formInline.schoolName=this.schoolName
        this.formInline.schoolId=this.schoolId;
        this.getclass();
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        // 打钩选时
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        submit() {
            this.listQuery.page = 1;
            this.searchFetchData();
        },
            // 回填学校
        getclass() {
            queryClassBySchool(this.schoolId).then(res => {
                this.formInline.classArr=res.data.content;
                if (res.data.content.length) {
                    this.formInline.classArr.unshift({pId: '', sNickName: '请选择'});
                    this.searchFetchData();
                }
            })
        },
        searchFetchData() {
            let page = this.listQuery.page;
            let rows = this.config.pageSize;
            let schoolIds=[this.formInline.schoolId];
            let sClassId=this.formInline.sClassId;
            let sVideoNumber=this.formInline.sVideoNumber;
            pageLiveDevice(page, rows, schoolIds, sClassId, sVideoNumber).then(res => {
                this.loading= false;
                this.AnnounceList = res.data.content.list;
                this.listQuery.total = res.data.content.pagination.total;
            }).catch(() => {
                this.loading= false;
            });
        },
       
        // 修改视角
        updateEye(row) {
            this.updataData.dialogUpdata = true;
            this.updataData.eyeName = row.sAngleView;
            this.updataData.pId=row.pId; // 原 摄像头记录id
            this.updataData.sAngleView = row.sAngleView;// 传给dialog的原视角名称
        },
   
         // 分页
        handleSizeChange(val) {
            this.loading = true;
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        }
    }
}
</script>

<style lang="scss" scoped>
 .formInline {
        .formBtn {
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition {
                position: absolute;
                right: 0px;
                top: 18px;
            }
        }
    }
</style>

